import React, { useState, useEffect } from 'react'
import { getInfo, uploadAvatar, updateUser } from './service/userService'
import {
  Button,
  Input,
  Switch,
  Uploader,
  Form,
  NavBar,
  Cell
} from 'react-vant'

import { useNavigate } from 'react-router-dom'

export default () => {
  const [form] = Form.useForm()
  const [user, setUser] = useState();
  const [hasUpload, setHasUpload] = useState(false);
  const navigate = useNavigate();

  useEffect(() => {
    (async () => {
      let { data } = await getInfo();
      console.log(data.user);
      setUser(data.user);
    })()
  }, [])

  const onFinish = async (values) => {
    // console.log(user, "---", values)
    const res = await updateUser({ ...values, sex: values.sex ? "1" : "0", avatar: user.avatar });
    console.log(res);
    navigate(-1);
  }

  return (
    <div>
      <NavBar
        title="编辑信息"
        leftText="返回"
        onClickLeft={() => navigate(-1)}
      />

      {user &&
        <Form
          colon
          form={form}
          onFinish={onFinish}
          initialValues={
            {
              ...user,
              sex: user.sex == "0" ? false : true,
              avatar: []
              // { url: APP_API_BASE + user.avatar }
            }}
          footer={
            <div style={{ margin: '16px 16px 0' }}>
              <Button round nativeType='submit' type='primary' block>
                提交
              </Button>
            </div>
          }
        >
          <Form.Item name='phonenumber' label='手机号'
            rules={[{ required: true, message: '不能为空' }, { pattern: /^1[34578]\d{9}$/, message: "格式不对" }]}
            valuePropName='value'>
            <Input
              value={user?.phonenumber}
              type='tel'
              onChange={val => setUser({ ...user, phone: val })}
              placeholder='请输入手机号'
            />
          </Form.Item>
          <Form.Item name='nickName'
            rules={[{ required: true, message: '不能为空' }]}
            label='昵称' valuePropName='value'>
            <Input
              value={user?.nickName}
              type='text'
              onChange={val => setUser({ ...user, nickName: val })}
              placeholder='请输入昵称'
            />
          </Form.Item>
          <Form.Item name='idCard'
            rules={[{ required: true, message: '不能为空' }, { pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, message: "格式不正确" }]}
            label='身份证号' valuePropName='checked'>
            <Input
              value={user?.idCard}
              type='text'
              onChange={val => setUser({ ...user, idCard: val })}
              placeholder='请输入身份证号'
            />
          </Form.Item>
          <Form.Item name='email'
            label='邮箱'
            valuePropName='value'>
            <Input
              value={user?.email}
              type='email'
              onChange={val => setUser({ ...user, email: val })}
              placeholder='请输入邮箱'
            />
          </Form.Item>
          <Form.Item label="性别">
            <Cell
              center
              title={user.sex == "0" ? "男" : "女"}
              rightIcon={
                <Form.Item name="sex"
                  valuePropName='checked' noStyle
                >
                  <Switch size={20}
                    checked={user.sex == "0" ? false : true}
                    onChange={(checked) => {
                      let sex = checked ? "1" : "0"
                      setUser({ ...user, sex })
                    }}
                  />
                </Form.Item>
              }
            />
          </Form.Item>

          <Form.Item
            name='avatar'
            label='头像'
          >
            <Uploader disabled={hasUpload} onChange={async (val) => {
              const formData = new FormData();
              formData.append("file", val[0].file);

              const { data } = await uploadAvatar(formData);
              setUser({ ...user, avatar: data.fileName });
              setHasUpload(true)
            }} />
          </Form.Item>
        </Form>}
    </div >
  )
}
